<template>
  <view class="component" :style="{display:labelPosition==='left'?'flex':'block'}">
    <view class="component-label">{{ label }}</view>
    <input class="component-input" :placeholder="placeholder" @input="onChangeInput"/>
  </view>
</template>

<script setup>
import {onLoad} from "@dcloudio/uni-app";

defineProps({
  placeholder: {
    type: String,
    default: '请输入'
  },
  value: {
    type: String,
    default: ''
  },
  label: {
    type: String,
    default: ''
  },
  labelPosition: {
    type: String,
    default: 'left'
  },
})

const emits = defineEmits(['change'])

onLoad(() => {
})

const onChangeInput = (e) => {
  emits('update:value', e.detail.value)
  emits('change', e.detail.value)
}
</script>

<style lang="scss" scoped>
.component {
  align-items: center;

  &-label {
    flex-shrink: 0;
    font-size: $fontSize;
    color: $textColor;
    line-height: 22px;
    white-space: nowrap;
    width: 72px;
  }

  &-input {
    font-size: $fontSize;
    color: $textColorRemark;
    line-height: 22px;
    padding: 7px 12px;
    background: $colorWhite;
    border: 1px solid $lineColor;
    border-radius: 2px;
  }
}
</style>
